<template>
  <div id="suggestorder">
    <el-dialog :append-to-body="true" :visible.sync="dialog" title="批量评价" width="940px">
      <el-form ref="form" :model="form" :inline="true" :rules="rules" size="small" label-width="125px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="满意度" prop="satisfaction">
              <el-select v-model="form.satisfaction" clearable class="input_text" :disabled="!checkEvaluteEditable(status)">
                <el-option v-for="item in satisfactionOptions" :key="item.key" :label="item.display_name" :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务时长" prop="serviceTime">
              <el-input-number v-model.number="form.serviceTime" :min="1" :max="999" controls-position="right" style="width: 300px;" :readonly="!checkEvaluteEditable(status)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="回访内容">
              <el-input v-model="form.content" style="width: 760px;" rows="5" type="textarea" :readonly="!checkEvaluteEditable(status)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="意见建议">
              <el-input v-model="form.suggest" style="width: 760px;" rows="5" type="textarea" :readonly="!checkEvaluteEditable(status)" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { batchEvaluate } from '@/api/tCustomerSuggest'
import { checkEvaluteEditable } from '@/api/data'
export default {
  name: 'BatchSuggestOrder',
  props: {
    data: {
      type: Object,
      required: true
    },
    supThis: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      status: 800,
      presentOptions: [
        { key: 1, display_name: '是' },
        { key: 0, display_name: '否' }
      ],
      satisfactionOptions: [
        { key: 0, display_name: '不满意' },
        { key: 1, display_name: '基本满意' },
        { key: 2, display_name: '满意' }
      ],
      loading: false, dialog: false,
      form: {
        id: '',
        orderCode: '',
        present: '',
        presentTime: '',
        satisfaction: '',
        serviceTime: '',
        requireTool: '',
        content: '',
        suggest: '',
        inputOperator: '',
        inputTime: '',
        startTime: ''
      },
      rules: {
        satisfaction: [
          { required: true, message: '请选择满意度', trigger: 'blur' }
        ],
        serviceTime: [
          { required: true, message: '请填入服务时长', trigger: 'blur', type: 'number' }
        ]
      }
    }
  },
  methods: {
    checkEvaluteEditable,
    cancel() {
      this.resetForm()
    },
    to(data) {
      this.form.orderCode = data.orderCode
      this.status = data.status
      // this.init()
      this.form.selections = data.selections
      this.dialog = true
    },
    doSubmit() {
      var temp = []
      console.log(this.form.selections)
      this.form.selections.forEach(item => { temp.push(item.orderCode) })
      this.form.requireTool = temp.join(',')
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.doEvaluate()
        } else {
          return false
        }
      })
    },
    doEvaluate() {
      batchEvaluate(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '评价成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.supThis.init()
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        orderCode: '',
        present: '',
        presentTime: '',
        satisfaction: '',
        serviceTime: '',
        requireTool: '',
        content: '',
        suggest: '',
        inputOperator: '',
        inputTime: '',
        startTime: '',
        selections: []
      }
    }
  }
}
</script>

<style scoped>
 #suggestorder{
    display: inline-block;
    margin-right: 3px;
  }
.input_text {
  width: 300px;
}
</style>
